<!doctype html>
<html>
	<head>
		<meta charset="utf-8">
		<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div id="app">
			<h4>查询数据</h4>
			<form>
				日期：<input name="datafile" type="date" v-model="startdate"/>
				至：<input name="datafile" type="date" v-model="endsdate"/>
				<button @click.prevent="query">查&nbsp;&nbsp;询</button>
			</form>
			<table cellspacing="0" cellpadding="0" border="1">
				<tr><th>日期</th><th>红1</th><th>红2</th><th>红3</th><th>红4</th><th>红5</th><th>红6</th><th>蓝球</th><th>销量</th><th>头等奖</th><th>二等奖</th></tr>
				<tr v-for="item in list">
					<td>{{item.num}}</td>
					<td>{{item.redone}}</td>
					<td>{{item.redtwo}}</td>
					<td>{{item.redthree}}</td>
					<td>{{item.redfour}}</td>
					<td>{{item.redfive}}</td>
					<td>{{item.redsix}}</td>
					<td>{{item.blue}}</td>
					<td>{{item.sale}}</td>
					<td>{{item.firstprize}}</td>
					<td>{{item.secondeprize}}</td>
				</tr>
				<tr><td colspan="8">合计</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
			</table>
			<div id="pages">
				<span @click.prevent="findByPage( 1 )">首页</span>
				<span class="current" v-for="index in totalPage" v-show="index<=10">
					<span @click.prevent="findByPage(index)">{{index}}</span>
				</span>
<!--				<span>2</span><span>3</span>-->
				<span @click.prevent="findByPage( totalPage )">尾页</span>
			</div>
		</div>
	<script>
		var vue = new Vue({
			el : "#app",
			data : {
				list : [],
				startdate : "",
				endsdate : "",
				// 分页查询设计的数据
				page : 1, // 当前页码数
				rows : 10, // 每页显示数
				totalPage : 0,
			},
			created(){
				this.findByFirst();
			},
			methods: {
				query(){
					var that = this;
					axios({
						method: 'POST',
						url: "QueryServlet/query",
						params:{
							startdate : this.startdate,
							endsdate: this.endsdate,
						}
					}).then(res =>{
						that.list = res.data.data;
						console.log(that.list);
					})
				},
				findByFirst(){ // TODO 首次分页查询 findByFirst page | rows}
					var that = this;
					axios({
						method: 'POST',
						url: "QueryServlet/findByFirst",
						params:{
							page: this.page,
							rows:this.rows,
						}
					}).then( res=>{
							// 计算当前页码数 -> 显示的页码数 -> 分页标签 -> pagination
							that.totalPage = Math.ceil( res.data.data.total / that.rows ); // 9 / 2 -> 4.5 -> 5
							// 界面渲染的数据
							that.list = res.data.data.rows;
							console.log(that.totalPage);
							console.log(that.list);

					})
				},

				findByPage( index ){ // 指定分页码分页查询
					var that = this;
					// console.log( event );
					// 判断用户是否重复点击
					if( this.page == index ){ // 当前页码数 点击页码 一致 阻止提交
						return;

					}
					this.page = index;


					// TODO findByPage
					axios({
						method: 'POST',
						url: "QueryServlet/findByPage",
						params:{
							page: this.page,
							rows:this.rows,
						}
					}).then( res=>{
							that.list = res.data; // 分页后数据集
							return;
					})

				}
			}

		})
	</script>
	</body>
</html>
<!--url: "QueryServlet/query",
params:{
name : this.startdate,
press: this.endsdate,
}-->
<!--<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>
<tr><td>20200205</td><td>12</td><td>22</td><td>8</td><td>4</td><td>5</td><td>6</td><td>17</td><td>44,234,545</td><td>4</td><td>1,241</td></tr>-->
<style>
	html,
	body {
		height: 100%;
		padding: 0px;
		margin: 0px;
		overflow: hidden;
		color: #333;
	}

	#app {
		margin: 50px;
	}

	form {
		text-align: right;
		display: inline-block;
	}
	
	input{
		width: 200px;
	}

	button {
		padding: 0px 20px;
	}
	
	form{
		margin: 10px 0px;
	}
	
	table{
		width: 100%;
		border-spacing: 0px;
	}
	
	th,td{
		padding: 3px;
	}
	
	td{
		text-align: right;
	}
	
	th{
		background-color: aqua
	}
	td:nth-child(1){
		text-align: center;
	}

	#pages{
		padding: 10px;
		text-align: right;
	}
	#pages>span{
		background-color: #ddd;
		margin: 2px;
		padding: 2px 5px;
		border-radius: 2px;
		min-width: 15px;
		display: inline-block;
		text-align: center;
		cursor: pointer;
	}
	#pages>span.current{
		background-color: #aaa;
	}
	#pages>span:hover{
		background-color: beige;
		color: green;
	}

</style>
